import React,{Component} from 'react';
import {NavLink} from 'react-router-dom';

import CSSModules from 'react-css-modules';
import {Header,Footer} from '../../components';
import styles from './index.scss';
import {
    Carousel,
    CarouselItem,
    CarouselControl,
    CarouselIndicators,
    CarouselCaption,
    Container, Row, Col
  } from 'reactstrap';

  const items = [
    {
      src: '/images/home/banner_1.jpg',
      altText: 'Slide 1',
      caption: 'Slide 1'
    },
    {
      src: '/images/home/banner_2.jpg',
      altText: 'Slide 2',
      caption: 'Slide 2'
    },
    {
      src: '/images/home/1530784632624.jpg',
      altText: 'Slide 3',
      caption: 'Slide 3'
    }
  ];
  
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { activeIndex: 0 };
        this.next = this.next.bind(this);
        this.previous = this.previous.bind(this);
        this.goToIndex = this.goToIndex.bind(this);
        this.onExiting = this.onExiting.bind(this);
        this.onExited = this.onExited.bind(this);
      }
    
      onExiting() {
        this.animating = true;
      }
    
      onExited() {
        this.animating = false;
      }
    
      next() {
        if (this.animating) return;
        const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
        this.setState({ activeIndex: nextIndex });
      }
    
      previous() {
        if (this.animating) return;
        const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
        this.setState({ activeIndex: nextIndex });
      }
    
      goToIndex(newIndex) {
        if (this.animating) return;
        this.setState({ activeIndex: newIndex });
      }
    render(){
        const { activeIndex } = this.state;
        const slides = items.map((item) => {
            return (
              <CarouselItem
                onExiting={this.onExiting}
                onExited={this.onExited}
                key={item.src}
              >
                <img src={item.src} alt={item.altText} style = {{ width: '100%', height: 520 }}/>
                <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
              </CarouselItem>
            );
          });
        return (<div>
            <Header/>
            <div>
            <Carousel
                activeIndex={activeIndex}
                next={this.next}
                previous={this.previous}
            >
                <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
                {slides}
                <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
                <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
            </Carousel>
            </div>
            <div styleName="wrap">
                <div styleName="hot">
                  <div styleName="title"><h4>今日热点</h4></div>
                  <div>
                    <div styleName="left">
                      <div styleName="banner">
                          <img src="/images/home/1.jpg"/>
                      </div>
                      <div styleName="con_left">
                        <h6>马特达为活命改造身体</h6>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                      </div>
                      <div styleName="con_right">
                      <h6>马特达为活命改造身体</h6>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p>
                        <p><a href="#">《功夫联盟》四大宗师一笑定乾坤</a></p></div>
                    </div>
                    <div styleName="center">
                        <div styleName="item">
                          <a href="">
                             <img src="/images/home/xxx.jpg"/>
                             <div styleName="center_title">布尼斯比熊</div>
                          </a>
                        </div>
                        <div styleName="item">
                          <a href="">
                             <img src="/images/home/xxx.jpg"/>
                             <div styleName="center_title">布尼斯比熊</div>
                          </a>
                        </div>
                        <div styleName="item">
                           <a href="">
                             <img src="/images/home/xxx.jpg"/>
                             <div styleName="center_title">布尼斯比熊</div>
                          </a>
                        </div>
                    </div>
                    <div styleName="right">
                          <a href="">
                             <img src="/images/home/pha.jpeg"/>
                             <div styleName="right_title">布尼斯比熊</div>
                             <p>布尼斯比熊布尼斯比熊布尼斯比熊布尼斯比熊
                             布尼斯比熊布尼斯比熊布尼斯比熊布尼斯比熊布尼斯比熊
                             布尼斯比熊布尼斯比熊</p>
                          </a>
                    </div>
                  </div>
                  
                </div>
                <hr></hr>
                <div styleName="top">
                    
                       <div styleName="title"><h4>电影排行榜</h4></div>
                    
                    <Row>
                        <Col xs="6">
                           <div styleName="one">
                                <img src="/images/home/1530784632624.jpg"/>
                                <span>1</span>
                           </div>
                        </Col>
                        <Col xs="6">
                          <Row>
                              <Col xs="4">
                                <div styleName="two">
                                    <a href="">
                                      <img src="/images/home/pha.jpeg"/>
                                      <div styleName="title">布尼斯比熊</div>
                                      <p>布尼斯比熊布尼斯比熊
                                      </p>
                                    </a>
                                    <span styleName="span2">2</span>
                                </div>
                              </Col>
                              <Col xs="4">
                                <div styleName="three">
                                    <a href="">
                                      <img src="/images/home/pha.jpeg"/>
                                      <div styleName="title">布尼斯比熊</div>
                                      <p>布尼斯比熊布尼斯比熊
                                      </p>
                                    </a>
                                    <span styleName="span3">3</span>
                                </div>
                              </Col>
                              <Col xs="4">
                                   <div styleName="four">
                                        <a href="">
                                          <img src="/images/home/pha.jpeg"/>
                                          <div styleName="title">布尼斯比熊</div>
                                          <p>布尼斯比熊布尼斯比熊布
                                          </p>
                                        </a>
                                        <span styleName="span4">4</span>
                                    </div>
                              </Col>
                          </Row>
                        </Col>
                    </Row>
                    <div styleName="more">
                      查看更多
                  </div>
                </div>
                <hr></hr>
                <div styleName="tv">

                     <Row>
                      <Col xs="10">
                          <Row>
                            <Col xs="12">
                              <div styleName="title"><h4>电视剧</h4></div>
                            </Col>
                          </Row>
                      </Col>
                      <Col xs="2">
                          <Row>
                            <Col xs="6">
                                <h5>排行榜</h5>
                            </Col>
                            <Col xs="6">
                                <span>TOP100>></span>
                            </Col>
                          </Row>
                      </Col>
                    </Row>
                    <Row>
                      <Col xs="4">
                          <NavLink to="/" styleName="img_1">
                              <img src="/images/home/1.jpg"/>
                          </NavLink>
                      </Col>
                      <Col xs="2">
                          <Row styleName="item">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                          <Row styleName="item">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                      </Col>
                      <Col xs="2">
                          <Row styleName="item">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                          <Row styleName="item">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                      </Col>
                      <Col xs="2">
                           <Row styleName="item">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                          <Row styleName="item">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海海峡密宗</p>
                          </Row>
                      </Col>
                      <Col xs="2" styleName="tv_top">
                          <div styleName="no_1">
                             <img src="/images/home/4.jpg"/>
                             <span><i>1</i>倾城时光</span>
                          </div>
                          <div styleName="no_2">
                             <span><i>2</i>将夜</span>
                          </div>
                          <div styleName="no_3">
                            <span><i>3</i>盛唐幻夜</span>
                          </div>
                          <div>
                              <span><i>4</i>我们的四十年</span>
                          </div>
                          <div>
                              <span><i>5</i>双十宠妃2</span>
                          </div>
                          <div>
                              <span><i>6</i>创业时代</span>
                          </div>
                          <div>
                              <span><i>7</i>斗破苍穹</span>
                          </div>
                          
                      </Col>
                    </Row>
                    <div styleName="more">
                        查看更多
                    </div>

                </div>
                <hr></hr>
                <div styleName="will_show">
                  <div styleName="title"><h4>即将上映</h4></div>
                  <div styleName="line">
                  </div>
                    
                    <Row>
                      <Col xs="1" style={{display:"none"}}>.col-3</Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月10日</span><i></i></div>
                            
                            <img src="/images/home/pha.jpeg" />
                            <div styleName="show_title">盖世英雄</div>
                      </Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月11日</span><i></i></div>
                      
                            <img src="/images/home/pha.jpeg" />
                            <div styleName="show_title">盖世英雄</div>
                      </Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月12日</span><i></i></div>
                      
                            <img src="/images/home/pha.jpeg" />
                            <div styleName="show_title">盖世英雄</div>
                      </Col>
                      <Col xs="2" styleName="show">
                            <div styleName="date"><span>11月13日</span><i></i></div>
                      
                            <img src="/images/home/pha.jpeg" />
                            <div styleName="show_title">盖世英雄</div>
                      </Col>
                      <Col xs="2" styleName="show">
                           <div styleName="date"><span>11月14日</span><i></i></div>
                      
                            <img src="/images/home/pha.jpeg" />
                            <div styleName="show_title">盖世英雄</div>
                      </Col>
                      <Col xs="1" style={{display:"none"}}>.col-3</Col>                                    
                    </Row>
                    <div styleName="more">
                        查看更多
                    </div>
                </div>
                <hr></hr>
                <div styleName="guess_like">
                    <Row>
                      <Col xs="9">
                          <Row>
                            <Col xs="10">
                              <div styleName="title"><h4>猜你喜欢</h4></div>
                            </Col>
                            <Col xs="2">
                              <div styleName="change">换一换</div>
                            </Col>
                          </Row>
                          <Row>
                            <Col xs="3">
                              <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                            <Col xs="3">
                                <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                            <Col xs="3">
                                <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                            <Col xs="3">
                                <img src="/images/home/kkk.jpg"/>
                              <h5>守墓人之海峡密宗</h5>
                              <p>守墓人之海峡密宗守墓人之海峡密宗</p>
                            </Col>
                          </Row>
                          
                      </Col>
                    
                      <Col xs="3">
                          <Row><h5>精品栏目</h5></Row>
                          <Row>
                            <ul>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                              <li><a href="#">心灰姑娘：计算方式广东分公司快乐时光</a><span>热映</span></li>
                            </ul>
                          </Row>
                      </Col>
                    </Row>
                    <div styleName="more">
                        查看更多
                    </div>
                </div>
                <hr></hr>
                <div styleName="comment">
                    
                     
                          <Row>
                            <Col xs="12">
                              <div styleName="title"><h4>热门影评</h4></div>
                            </Col>
                           
                          </Row>
                          <Row>
                            <Col xs="5">
                              <img src="/images/home/kkk.jpg"/>
                              <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                              <div styleName="content">
                                 <h5>守墓人之海峡密宗</h5>
                                 <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                 守墓人之海峡密宗守墓人之海峡密宗
                                 守墓人之海峡密宗守墓人之海峡密宗
                                 </p>
                              </div>
                              
                            </Col>
                            <Col xs="7" styleName="right">
                                <Row styleName="item">
                                  <Col xs="8">
                                  <div styleName="content">
                        
                                    <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    </p>
                                    <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                                    
                                  </div>
                                  </Col>
                                  <Col xs="4" styleName="c_img">
                                     <img src="/images/home/kkk.jpg"/>
                                  </Col>
                                </Row>
                                <Row styleName="item">
                                  <Col xs="8">
                                  <div styleName="content">
                        
                                    <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    </p>
                                    <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                                    
                                  </div>
                                  </Col>
                                  <Col xs="4" styleName="c_img">
                                     <img src="/images/home/kkk.jpg"/>
                                  </Col>
                                </Row>
                                <Row styleName="item">
                                  <Col xs="8">
                                  <div styleName="content">
                        
                                    <p>守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    守墓人之海峡密宗守墓人之海峡密宗
                                    </p>
                                    <div styleName="from"><span>用户名</span>  评  《<span>至暴之年</span>》<i>8.0</i></div>
                                    
                                  </div>
                                  </Col>
                                  <Col xs="4" styleName="c_img">
                                     <img src="/images/home/kkk.jpg"/>
                                  </Col>
                                </Row>
                                
                            </Col>
                          </Row>
                </div>
                
            </div>
            <Footer/>
        </div>)
    }
}

export default CSSModules(Home, styles,{allowMultiple:true});